<template>
  <div class="rank">
    <el-card
      class="box-card"
      v-for="(item, index) in rankList"
      :key="index"
      :class="colorList[index]"
      @mouseover="showTip[index] = true"
      @mouseleave="showTip[index] = false"
    >
      <div class="content">
        <div class="title">{{ item.rankName }}</div>
        <img src="@/assets/播放.png" v-if="showTip[index]" @click="toRankInfo(item.rankName)">
        <div class="songList">ww</div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { VideoPlay } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

//控制卡片悬浮按钮
const showTip = ref([
  false,
  false,
  false,
  false
]);

//拿到歌单数据
const rankList = ref([
  {
    rankName: "飙升榜",
    songList: [],
  },
  {
    rankName: "二次元榜",
    songList: [],
  },
  {
    rankName: "MV榜",
    songList: [],
  },
  {
    rankName: "新歌榜",
    songList: [],
  },
]);

const colorList = ref(["colorOne", "colorTwo", "colorThree", "colorFour"]);

const router = useRouter();
//点击去排行榜详情页
const toRankInfo=(rankName)=>{
  console.log(rankName)
  //跳转
  router.push({
    path: "/rankInfo",
  });
}
</script>
<style lang="scss" scoped>
.rank {
  display: flex;
}
.title {
  max-height: 80px;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.songList {
  max-height: 400px;
  margin-top: 100px;
}
img{
width: 50px;
height: 50px;
position: absolute;
margin-left: 150px;
margin-top: 20px;
}
.colorOne {
  background-color: #ff6666;
}
.colorTwo {
  background-color: #ffcccc;
}
.colorThree {
  background-color: #ccffff;
}
.colorFour {
  background-color: #33cc33;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 380px;
  height: 500px;
}
</style>
